/**
 * 基金组合——上传excel弹窗，持仓预览
 * @author tongsitong
 */
import React, { useEffect, useRef, useState } from "react";
import UploadFileModal from "@/components/UploadFileModal";
import styles from "./PreviewPosition.less";
import { UploadFile } from "../UploadFile";
import { commitPosition } from "@/pages/PortfolioList/service";
import { PreviewTable } from "./PreviewTable";
import { PreviewHint } from "./PreviewHint";
import { PreviewFooter } from "./PreviewFooter";

interface Props {
  visible: boolean;
  setVisible?: any;
  id: string; // 组合id
  name: string; // 组合名称
  afterConfirm?: any; // 确认的回调函数
  setWarnInfo?: any; // 上传报错的弹窗信息
  setWarnPopVisible?: any; // 上传报错的弹窗
  okText?: string; // 默认是确认
  mask?: boolean;
}
export const PreviewPosition = (props: Props) => {
  const [emptyVisible, setEmptyVisible] = useState(true); // 是否显示数据为空
  const [file, setFile] = useState({});
  const [excelContent, setExcelContent] = useState([]); // 上传文件内容
  const [fileId, setFileId] = useState(""); // 上传文件id
  const [isFileError, setIsFileError] = useState(false); // 文件没有上传出红框
  const [isExcelError, setIsExcelError] = useState(false); // 持仓列表出红框

  const uploadRef = useRef(); //上传文件子组件ref

  const handleConfirm = () => {
    // check before submit
    if (!fileId) {
      setIsFileError(true);
      return;
    }

    if (fileId === "1") {
      setIsExcelError(true);
      return;
    }

    resetUI();
    commitPosition({
      fileId,
      portfolioCode: props.id,
    }).then((res) => {
      console.log(res);
      props.afterConfirm && props.afterConfirm();
    });
    props.setVisible(false);
  };

  // 清空文件内容
  const resetUI = () => {
    setFile({});
    uploadRef.current.handleClearFile();
    setEmptyVisible(true);
    setExcelContent([]);
    setIsFileError(false);
    setIsExcelError(false);
  };

  const handleCancel = (visible: boolean) => {
    resetUI();
    props.setVisible(visible);
  };

  const getResData = (res) => {
    if (res?.code != 0) {
      // 弹窗报错
      // message.error(res.errMsg || res.msg || res.message)
      props.setWarnInfo("文件解析失败，请检查上传文件格式。");
      props.setWarnPopVisible(true);
      setIsFileError(false);
      resetUI();
      return;
    }
    setExcelContent(res?.data?.fundList);
    setFileId(res?.data?.fileId);
  };
  useEffect(() => {
    if (excelContent?.length > 0) {
      setEmptyVisible(false);
    }
  }, [excelContent]);
  return (
    <UploadFileModal
      wrapClassName={styles.upload_modal}
      visible={props.visible}
      title="上传持仓记录"
      okText={props.okText}
      toggleModal={handleCancel}
      handleOk={handleConfirm}
      bodyStyle={{ paddingTop: "0" }}
      leftFooter={<PreviewFooter />}
      mask={props.mask}
    >
      <div className={styles.upload_file}>
        <div className={styles.title}>{props.name || "-"}</div>
        <div className={styles.small_title}>| 上传文件</div>
        <UploadFile
          setFile={setFile}
          setResData={getResData}
          ref={uploadRef}
          isError={isFileError}
        />
      </div>
      <PreviewHint visible={!emptyVisible} />
      <PreviewTable
        isError={isExcelError}
        emptyVisible={emptyVisible}
        excelContent={excelContent}
      />
    </UploadFileModal>
  );
};
